import React, { PropTypes, Component } from 'react';
import app from '../App/App.css';
import styles from './LoginPage.css';
import withStyles from '../../decorators/withStyles';
import ajax from '../../ajax'
import UserActions from '../../actions/UserActions'
import UserSotre from '../../stores/UserStore'

const userActions = new UserActions()

@withStyles(app)
@withStyles(styles)
class LoginPage extends Component {

  constructor (props) {
    super(props)

    this.state = { name: '', pwd: '' }
  }

  handleChange (event) {
    this.setState({[event.target.name]: event.target.value})
  }

  render() {
    return (
      <div className="LoginPage">
        <div className="LoginPage-container row">
          <div className="wrapper col-sm-4 col-sm-offset-4">
            <form className="form-horizontal">
              <div className="form-group">
                <label className="control-label col-sm-2">
                  <span className="glyphicon glyphicon-user"></span>
                </label>
                <div className="col-sm-10">
                  <input type="text" name="name" className="form-control" onChange={this.handleChange.bind(this)} />
                </div>
              </div>
              <div className="form-group">
                <label className="control-label col-sm-2">
                  <span className="glyphicon glyphicon-lock"></span>
                </label>
                <div className="col-sm-10">
                  <input type="password" name="pwd" className="form-control" onChange={this.handleChange.bind(this)} />
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <a className="btn btn-primary form-control" onClick={this._login.bind(this)}>登录</a>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div className="load-overlay"></div>
      </div>
    );
  }

  _login () {
    if (!this.state.name || !this.state.pwd) {
      return
    }

    userActions.login(this.state)

  }

}

export default LoginPage;
